{include "INC_header.html" title="CMS模块"}
<div id="app-outlet" class="app-outlet">
    <!-- 侧栏菜单 -->
    <aside>
        <div class="app-icon">CMS</div>
        <!-- 菜单 -->
        <menu>
            <div class="item" v-for="(menu, index) in menus" :class="{ active:activeIndex === index }" @click="clickMenu(index)">
                <div class="start"><i :class="menu.icon"></i></div>
                <div class="center">{{ menu.name.length > 2 ? menu.name.slice(0, 2) : menu.name }}</div>
            </div>
        </menu>
        <div class="text-center text-small padding"><a href="https://inphp.cc" target="_blank">INPHP</a></div>
    </aside>
    <!-- 主体框架内容 -->
    <div class="app-container">
        <header class="ui flex-item padding-left padding-right border-bottom">
            <div class="center justify-center">
                <div class="ui breadcrumb">
                    <div class="item" v-for="b in location">{{ b.name }}</div>
                </div>
            </div>
            <div class="end justify-center">
                <a-tooltip title="网站首页" placement="bottom">
                    <a-button shape="circle" href="{url url='/cms'}" target="_blank">
                        <template #icon>
                            <i class="fa-light fa-house"></i>
                        </template>
                    </a-button>
                </a-tooltip>
            </div>
        </header>
        <main class="app-container">
            <iframe width="100%" height="100%" scrolling="auto" :src="iframeSrc" frameborder="0"></iframe>
        </main>
    </div>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message } = antd;
    const app = createApp({
        data() {
            return {
                //
                activeIndex: 0,
                //
                location: [],
                //数据
                menus: [],
                //页面地址
                iframeSrc: ''
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData() {
                let self = this;
                //加载菜单
                const hide = message.loading('正在加载菜单...', 0);
                axios.get("{url url='/admin/api/modules/menus'}", {
                    params: {
                        moduleName: 'cms'
                    }
                }).then(({ data }) => {
                    hide();
                    if (data.error !== 0) {
                        //如果是
                        if (data.error === 30) {
                            window.location.href = "{url url='/admin/admin/login'}?redirect={url url='/cms/admin'}";
                        } else {
                            message.error(data.message);
                        }
                    } else {
                        self.menus = data.data;
                        self.location = [data.data[0]];
                        self.iframeSrc = self.menus[0].url;
                    }
                }).catch(() => {
                    hide();
                    message.error("未能加载菜单");
                });
            },
            //点击菜单
            clickMenu(index) {
                this.location = [];
                this.activeIndex = index;
                let menu = this.menus[index];
                if (menu.subMenu) {
                    //加载子菜单
                } else {
                    this.location.push(menu);
                    this.iframeSrc = '';
                    setTimeout(() => {
                        this.iframeSrc = menu.url;
                    }, 0);
                }
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //监听相关事件
    window.onmessage = _event => {
        let data = _event.data;
        if (typeof data === 'object' && data.event) {
            switch (data.event) {
                case "location" :
                    vm.location = data.data || [{ name:'未知页面'  }]
                    break;
            }
        }
    }
</script>
{include "INC_footer.html"}